<script setup>
import { ref, onMounted } from 'vue';
import { queryTree, queryChild } from '@/utils/api';
import { Check, Close, Delete, Edit, Message, Search, Star, Plus,Refresh } from '@element-plus/icons-vue';
import SaveOrUpdate from './SaveOrUpdate.vue';
const data = ref([]);
const defaultProps = {
  children: "deptList",
  label: "deptName"
}
//表格数据
const tableData = ref([]);
const currentParentId = ref("0");

//查询部门树
async function deptTree() {
  const res = await queryTree();
  if (res.code == 1) {
    console.log("部门树：", res.data);
    data.value = res.data
  }
}


//查询子部门
async function deptChild() {
  console.log("部门父ID:", currentParentId.value);
  const res = await queryChild(currentParentId.value);
  if (res.code == 1) {
    console.log("查询子部门:", res.data);
    tableData.value = res.data
  }
}
//树节点点击
function chg(n) {
  //更改当前父id
  currentParentId.value = n.id;
  //重新查询
  deptChild();

}

//刷新
function  rerfesh() {
  currentParentId.value="0",
  deptChild();
}

/***声明周期钩子方法 */
onMounted(() => {
  deptTree();
  deptChild();
})
</script>
<template>
  <div>
    <el-row>
      <el-col :span="4" class="leftTree">
        <!--树形结构-->
        <el-tree :data="data" :props="defaultProps" @node-click="chg"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-button type="primary" @click="rerfesh" :icon="Refresh" class="tro">刷新</el-button>
        <el-button type="primary" @click="deptSave" :icon="Plus" class="tro">添加</el-button>
        <!--表格列表-->
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column label="序号" width="80" type="index" header-align="center" align="center" />
          <el-table-column prop="deptNo" label="部门编码" width="150" header-align="center" />
          <el-table-column prop="deptName" label="部门名称" header-align="center" />

          <el-table-column prop="parentName" label="上级部门" width="200" header-align="center" />

          <el-table-column label="操作" width="180" header-align="center" align="center">
            <template v-slot="{ row }">
              <el-button type="primary" size="small" :icon="Edit" @click="update(row)" >编辑</el-button>
              <el-button type="danger"   size="small" :icon="Delete"   @click="del(row.id)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
  <SaveOrUpdate ></SaveOrUpdate>
</template>
<style scoped>
.leftTree {
  border: #eee solid 1px;
  height: calc(100vh - 90px);
}
.tro{
  margin: 10px;
}
</style>